import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../../actions/index'
import 'antd/dist/antd.css'
import { Carousel } from 'antd'
// import BScroll from 'better-scroll'

class HomeIndex extends Component {

    state = {
        page: 0,
        pageNum: 10
    }

    componentDidMount() {
        this.props.get_List(this.state.page, this.state.pageNum)
    }

    clickBtn(index) {
        this.props.click_Btn(index)
    }

    clickSou() {
        this.props.history.push('/sou')
    }

    render() {
        let { list, i } = this.props
        return (
            <div className='HomeIndex'>
                <div style={{ height: '30px' }}>
                    <input onClick={
                        this.clickSou.bind(this)
                    } />
                </div>
                <ul className='dh'>
                    {
                        list && list.length ? list.map((item, index) => {
                            return <li key={index} className={i === index ? 'active2' : ''} onClick={
                                this.clickBtn.bind(this, index)
                            }>{item.title}</li>
                        }) : ''
                    }
                </ul>
                <div className='lbt'>
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}>1</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>2</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>3</h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>4</h3>
                        </div>
                    </Carousel>
                </div>
                <div className='scroll' style={{overflow: 'hidden', height: '100%'}}>
                    <div className='list'>
                        {
                            list && list.length ? list[i].children.map((item, index) => {
                                return (
                                    <div key={index}>
                                        <img src={item.img} alt='' />
                                        <h3>{item.name}</h3>
                                        <p>{item.word}</p>
                                    </div>
                                )
                            }) : ''
                        }
                    </div>
                </div>
            </div>
        )
    }
}

const contentStyle = {
    height: '160px',
    color: '#fff',
    lineHeight: '160px',
    textAlign: 'center',
    background: '#364d79',
    flexShrink: '0'
}

let mapStateToProps = ({ dataReducer }) => {
    return {
        ...dataReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(HomeIndex)